import React, { PureComponent } from "react"
import { Link,Route,Switch,withRouter } from 'react-router-dom';
// import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import { bindActionCreators } from "redux"
import { connect } from "react-redux"
import update from "immutability-helper"
import { getCookie } from "libs/cookie"
import { read } from "libs/util/readwirte"
import {breadcrumbNameMaps} from "../breadcrumb"



import {Button,Icon,Tag,Modal,Breadcrumb} from "antd"

import "./styles.less"

/*子模块*/
import Head from "./components/head" 
import Menus from "./components/menuTree"
import Assess from "../Assess"; // 考核
import Manage from "../Manage"; // 管理
import Mine from "../mine"; // 我的

@withRouter
@connect(
  (state) => ({
  }),
  (dispatch) => ( 
    bindActionCreators({
      
      
    }, dispatch)
  )
)
export default class AppContainer extends PureComponent {
  state = {
  }
  render() {
    const { history,location} = this.props;
    console.log(location,"location")
    const pathSnippets = location.pathname.split('/').filter((i,index) =>i);
    const extraBreadcrumbItems = pathSnippets.map((_, index) => {
        const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
        return (
          <Breadcrumb.Item key={url}>
            <Link to={url}>
              {breadcrumbNameMaps[url]}
            </Link>
          </Breadcrumb.Item>
        );
    });
    const breadcrumbItems = [].concat(extraBreadcrumbItems);
    return (
      <div
        className="app">
        <Head/>
        <div className="app-container">
            <div className="app-container-menu" >
              <Menus />
            </div>
            <div className="app-container-right">
              <div className="app-title">
                <Breadcrumb>
                    {breadcrumbItems}
                  </Breadcrumb>
              </div>
              <div className="app-content">

              <Switch key={this.props.location.pathname}>
                <Route exact path="/index" component={Assess} />
                <Route path="/index/assess" component={Assess} />                
                <Route  path="/index/manage" component={Manage} />
                <Route path="/index/mine" component={Mine} />                
              </Switch>

              </div>
            </div>
        </div>
      </div>
    )
  }
  saveState = () => {
    localStorage.setItem("appContainer", JSON.stringify(this.state))
  }
  componentWillMount() {
    window.addEventListener("beforeunload", this.saveState)
    const { replace, location, push } = this.props.history
    if (getCookie("token")) {
      replace(location)
    } else {
      // push("/login")
    }
        document.body.style.margin = "0px" ;
         // 这是防止页面被拖拽
         document.body.addEventListener( 'touchmove' , ( ev ) => {
             ev.preventDefault( ) ;
         } ) ;
  }
  componentDidMount() {
    let state = JSON.parse(localStorage.getItem("appContainer") || "{}")
    if (Object.keys(state).length > 0) {
      // this.setState(state)
      // localStorage.setItem("appContainer", "")
      // localStorage.setItem("appMessage", "")
    }
  }
  componentWillUnmount() {
    window.removeEventListener("beforeunload", this.saveState)
  }
}